<!-- 【筛选方案区域】 -->
<template>
  <div class="contain" v-if="Object.keys(filterParamList).length != 0">
    <div class="myProgra" v-if="isShow != 0">
      <div>快捷过滤</div>
      <div
        class="border"
        @click="myPrograClick(item, index)"
        v-for="(item, index) in filterProject"
        :key="index"
        :class="myPrograIndex == index ? 'actionBorder' : ''"
      >
        {{ item.title }}
        <i class="el-icon-success" v-if="myPrograIndex == index"></i>
      </div>
    </div>

    <div class="select">
      <div class="onediv">搜索过滤</div>
      <div class="inputSelect">
        <!-- 第一框 筛选字段选择框 -->
        <el-select
          v-model="filterParamList[0].paramName"
          placeholder="请选择"
          clearable
          filterable
          default-first-option
          @change="selectParamChange(0)"
          @clear="selectParamClear(0)"
        >
          <el-option
            v-for="(item,my) in filterParam"
            :key="my +'my'"
            :label="item.title"
            :value="item.paramName"
          ></el-option>
        </el-select>

        <!-- 第二框 条件选择框 -->
        <!-- <el-select v-model="filterParamList[0].where" clearable> -->
        <el-select v-model="filterParamList[0].where" clearable>
          <el-option
            v-for="item in conditionList[0]"
            :key="item.where"
            :label="item.name"
            :value="item.where"
          ></el-option>
        </el-select>

        <!-- 第三框 -->
        <!-- 日期型 -->
        <template v-if="paramsType[0] == 'datetime'">
          <!-- 日期范围取值 -->
          <el-date-picker
            class="datetimeClass"
            v-show="filterParamList[0].where == 'range'"
            v-model="selectTime[0]"
            type="daterange"
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            align="right"
            :unlink-panels="true"
            :editable="false"
            @change="dateRangeClick(0)"
          ></el-date-picker>

          <!-- 日期取值 -->
          <el-date-picker
            class="datetimeClass"
            v-show="filterParamList[0].where != 'range'"
            v-model="filterParamList[0].value"
            type="date"
            placeholder="选择日期时间"
            align="right"
            :editable="false"
            value-format="yyyy-MM-dd"
          ></el-date-picker>
        </template>
        <!-- 数值框 -->
        <el-input
          slot="reference"
          v-else-if="paramsType[0] == 'int'"
          class="inputClass datetimeClass"
          v-model="filterParamList[0].value"
          placeholder="请输入"
          type="number"
          min="0"
          size="mini"
          clearable
          @clear="clearClick(0)"
        ></el-input>
        <!-- 其他类型的数值 -->
        <template v-else>
          <!-- 包括和不包括 -->
          <el-input
            slot="reference"
            v-if="
            filterParamList[0].where == 'owner' ||
            filterParamList[0].where == 'notOwner'
          "
            class="inputClass datetimeClass"
            v-model="filterParamList[0].value"
            placeholder="请输入内容(用逗号隔开)"
            size="mini"
            clearable
            @focus="showHistory"
            @blur="hideHistory"
            @clear="clearClick(0)"
          ></el-input>
          <el-input
            slot="reference"
            v-else
            class="inputClass datetimeClass"
            v-model="filterParamList[0].value"
            placeholder="请输入内容"
            size="mini"
            clearable
            @focus="showHistory"
            @blur="hideHistory"
            @clear="clearClick(0)"
          ></el-input>
        </template>

        <div class="conditionClass el-icon-s-operation" @click="isShowInput">
          <span class="isFilterNum">{{ filterParamList.length }}</span>
        </div>

        <!--拓展过滤条件-->
        <div class="iconselect el-icon-search" @click="select"></div>
        <div class="funBtn" @click="preser" v-if="isShow != 0">保存</div>
        <div class="funBtn" @click="reset">重置</div>
      </div>
      <template>
        <el-popover
          ref="popover"
          placement="bottom-start"
          width="195"
          trigger="manual"
          v-model="visible"
        >
          <div>
            历史搜索
            <i
              class="el-icon-delete"
              style="font-size:20px;color:red;margin-left: 58%;margin-top:5px"
              @click="empty"
            ></i>
          </div>

          <div class="srarch_main">
            <div class="seach_item" v-for="(item,index) in historyList" :key="index">
              <div style="display:flex">
                <div style="width:90%" @click="putValue(item)">{{item}}</div>
                <i class="el-icon-close" style="font-size:20px;" @click="delateValue(item)"></i>
              </div>
            </div>
          </div>
        </el-popover>
      </template>
    </div>

    <!-- 下拉多层筛选 -->
    <div class="isShowClass" v-if="isShowBox">
      <div class="isShowIcon el-icon-minus" @click="isShowBox = false"></div>
      <div
        v-for="(item, index) in filterParamList"
        class="isShowBoxtSelect inputSelect"
        :key="index"
      >
        <el-select
          v-model="item.paramName"
          clearable
          filterable
          default-first-option
          @change="selectParamChange(index)"
          @clear="selectParamClear(index)"
        >
          <el-option
            v-for="(item1,my1) in filterParam"
            :key="my1+'my1'"
            :label="item1.title"
            :value="item1.paramName"
          ></el-option>
        </el-select>

        <el-select v-model="item.where" clearable>
          <el-option
            v-for="item in conditionList[index]"
            :key="item.where"
            :label="item.name"
            :value="item.where"
          ></el-option>
        </el-select>

        <template v-if="paramsType[index] == 'datetime'">
          <el-date-picker
            class="datetimeClass"
            v-show="filterParamList[index].where == 'range'"
            v-model="selectTime[index]"
            type="daterange"
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            align="right"
            :editable="false"
            @change="dateRangeClick(index)"
            @clear="clearClick(index)"
          ></el-date-picker>

          <el-date-picker
            class="datetimeClass"
            v-show="filterParamList[index].where != 'range'"
            v-model="filterParamList[index].value"
            type="date"
            placeholder="选择日期时间"
            align="right"
            :editable="false"
            value-format="yyyy-MM-dd"
            @clear="clearClick(index)"
          ></el-date-picker>
        </template>

        <el-input
          class="inputClass datetimeClass"
          v-model="filterParamList[index].value"
          placeholder="请输入"
          type="number"
          min="0"
          v-else-if="paramsType[index] == 'int'"
          size="mini"
          clearable
          @clear="clearClick(index)"
        ></el-input>

        <template v-else>
          <el-input
            v-if="
            filterParamList[index].where == 'owner' ||
            filterParamList[index].where == 'notOwner'
          "
            class="inputClass datetimeClass"
            v-model="filterParamList[index].value"
            placeholder="请输入内容(用逗号隔开)"
            size="mini"
            clearable
            @clear="clearClick(index)"
          ></el-input>
          <el-input
            v-else
            class="inputClass datetimeClass"
            v-model="filterParamList[index].value"
            placeholder="请输入内容"
            size="mini"
            clearable
            @clear="clearClick(index)"
          ></el-input>
        </template>
        <div
          class="el-icon-remove"
          style="margin: 0 5px; color: #555"
          @click="removeFilterClick(index)"
          v-if="index != 0"
        ></div>
        <!--去除按钮-->
      </div>
      <div
        class="el-icon-circle-plus"
        style="margin-left: 10px; color: #555"
        @click="addFilterClick"
      ></div>
      <!--添加按钮-->
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      visible: false,
      historyList: [],
      myPrograIndex: 0,
      // 筛选条件
      selectConditions: [
        {
          type: "text",
          param: [
            {
              where: "include",
              name: "包含"
            },
            {
              where: "notInclude",
              name: "不包含"
            },
            {
              where: "equal",
              name: "等于"
            },
            {
              where: "notEqual",
              name: "不等于"
            },
            {
              where: "null",
              name: "为空"
            },
            {
              where: "notNull",
              name: "不为空"
            },
            {
              where: "owner",
              name: "包括(多个)"
            },
            {
              where: "notOwner",
              name: "不包括(多个)"
            }
          ]
        },
        {
          type: "string",
          param: [
            {
              where: "equal",
              name: "等于"
            },
            {
              where: "notEqual",
              name: "不等于"
            },
            {
              where: "null",
              name: "为空"
            },
            {
              where: "notNull",
              name: "不为空"
            },
            {
              where: "greater",
              name: "大于"
            },
            {
              where: "greaterEqual",
              name: "大于等于"
            },
            {
              where: "less",
              name: "小于"
            },
            {
              where: "lessEqual",
              name: "小于等于"
            },
            {
              where: "owner",
              name: "包括"
            },
            {
              where: "notOwner",
              name: "不包括"
            }
          ]
        },
        {
          type: "datetime",
          param: [
            {
              where: "equal",
              name: "等于"
            },
            {
              where: "notEqual",
              name: "不等于"
            },
            {
              where: "null",
              name: "为空"
            },
            {
              where: "notNull",
              name: "不为空"
            },
            {
              where: "greater",
              name: "大于"
            },
            {
              where: "greaterEqual",
              name: "大于等于"
            },
            {
              where: "less",
              name: "小于"
            },
            {
              where: "lessEqual",
              name: "小于等于"
            },
            {
              where: "range",
              name: "范围"
            }
          ]
        },
        {
          type: "int",
          param: [
            {
              where: "equal",
              name: "等于"
            },
            {
              where: "notEqual",
              name: "不等于"
            },
            {
              where: "null",
              name: "为空"
            },
            {
              where: "notNull",
              name: "不为空"
            },
            {
              where: "greater",
              name: "大于"
            },
            {
              where: "greaterEqual",
              name: "大于等于"
            },
            {
              where: "less",
              name: "小于"
            },
            {
              where: "lessEqual",
              name: "小于等于"
            },
            {
              where: "owner",
              name: "包括(多个)"
            },
            {
              where: "notOwner",
              name: "不包括(多个)"
            }
          ]
        }
      ],
      conditionList: [], //过滤条件二
      selectProgject: 0, // 当前选中的【方案】
      dateRangeValue: [],
      filterParamList: [
        {
          paramName: "", // 当前选中的【字段】
          where: "", // 当前选中的【条件范围】
          value: null // 当前输入【内容】
        }
      ],
      paramsType: [],
      isShowBox: false, //展示筛选条件的盒子显示和隐藏
      selectTime: [[]] // 日期
    };
  },
  props: {
    filterProject: {
      type: Array,
      default: () => {
        return [];
      }
    },
    // 我的方案区域
    filterParam: {
      type: Array,
      default: () => {
        return [];
      }
    }, // 过滤条件1
    menuKey: String,
    paramList: Array,

    isShow: {
      type: Number,
      default: 1
    }
  },
  watch: {
    // 已有、保存了的筛选条件
    paramList(nval, oval) {
      // console.log(123);
      // this.filterParamList = []
      if (nval != null) {
        this.filterParamList = nval;
        // 对有保存的数据进行设置
        this.filterParamList.forEach((item, index) => {
          if (item.paramName != "") {
            this.paramsType[index] = this.filterParam.find(
              item => item.paramName == this.filterParamList[index].paramName
            ).type;
            this.conditionList[index] = this.selectConditions.find(
              item => item.type == this.paramsType[index]
            ).param;
          }
          // 如果保存的数据是 【时间区间】 第一个过滤条件类型datetime  第二个过滤条件是range(范围)
          if (this.paramsType[index] == "datetime" && item.where == "range") {
            let k = this.filterParamList[index].value.split(",");
            this.selectTime[index] = [];
            k.forEach(item1 => {
              this.selectTime[index].push(new Date(item1));
            });
          }
        });
      }
      // this.$forceUpdate();
    },
    filterProject(nval, oval) {
      nval.forEach(item => {
        // 判断数据返回的默认选中
        if (item.selected) {
          this.myPrograIndex = item.value;
          this.selectProgject = item.value;
        }
      });
    },
    selectTime: {
      handler(val) {
        console.log(val);
      },
      immediate: true,
      deep: true
    }
  },
  mounted() {
    console.log(this.paramList);
    console.log(this.filterProject);
    console.log(this.filterParam);

    if (JSON.parse(localStorage.getItem("historyList"))) {
      this.historyList = JSON.parse(localStorage.getItem("historyList"));
    }
    // 创建回车事件监听
    window.addEventListener("keydown", this.keyDown);
  },
  destroyed() {
    // 销毁事件 （销毁回车事件监听）
    window.removeEventListener("keydown", this.keyDown, false);
  },
  methods: {
    keyDown(e) {  // 回车则执行
      // 回车则执行登录方法 enter键的ASCII是13
      if (e.keyCode === 13) {
        // this.commonFunction(0); 
        this.select();
      }
    },
    // 监听【我的方案】的点击事件
    myPrograClick(item, index) {
      this.myPrograIndex = index;
      this.selectProgject = item.value; // 获取点击的方案的数据，请求数据的时候需要用到
    },

    // 【第一个】 筛选字段的选择后 回调
    selectParamChange(index) {
      //通过字段的选中，去查找对应的条件

      // this.filterParamList[index].where = ""; // 清除范围条件值
      // this.filterParamList[index].value = null; //清除输入框

      if (this.filterParamList[index].paramName != "") {
        this.paramsType[index] = this.filterParam.find(
          item => item.paramName == this.filterParamList[index].paramName
        ).type;

        // 切换对应类型的第二个筛选框的数据

        this.conditionList[index] = this.selectConditions.find(
          item => item.type == this.paramsType[index]
        ).param;

        // console.log(this.conditionList[index]);
        // console.log(this.filterParamList[index].where);

        this.conditionList[index].forEach(item => {
          if (item.where != this.filterParamList[index].where) {
            //console.log(item[index]);

            this.filterParamList[index].where = this.conditionList[
              index
            ][0].where;
            this.filterParamList[index].name = this.conditionList[
              index
            ][0].name;
            this.filterParamList[index].value = null;
          }
        });
      }
    },
    // 清除第一个下拉框选择内容时 清除二级条件选项
    selectParamClear(index) {
      this.conditionList.splice(index, 1); //过滤条件二
      this.filterParamList[index].where = "";
    },

    // 选中时间范围的时候,选中状态
    dateRangeClick(index) {
      // console.log(index);
      if (this.selectTime[index] != null) {
        let dataTime = "";
        this.selectTime[index].forEach(item => {
          let d = new Date(item);
          if (dataTime == "") {
            dataTime =
              d.getFullYear() + "-" + (d.getMonth() + 1) + "-" + d.getDate();
          } else {
            dataTime =
              dataTime +
              "," +
              d.getFullYear() +
              "-" +
              (d.getMonth() + 1) +
              "-" +
              d.getDate();
          }
        });
        this.filterParamList[index].value = dataTime;
      } else {
        this.filterParamList[index].value = null;
      }
    },

    // 传递参数
    commonFunction(v) {
      if (this.filterParamList.length == 1) {
        if (
          this.filterParamList[0].paramName == "" &&
          this.filterParamList[0].where == "" &&
          this.filterParamList[0].value == null
        ) {
          let paramsList = [];
          this.isShowBox = false;
          this.$emit("getActionSelect", v, paramsList, this.selectProgject);
        } else if (
          this.filterParamList[0].where == "null" ||
          this.filterParamList[0].where == "notNull"
        ) {
          this.filterParamList[0].value = "";
          this.isShowBox = false;
          this.filterParamList[0].menuKey = this.menuKey;
          this.$emit(
            "getActionSelect",
            v,
            this.filterParamList,
            this.selectProgject
          );
        } else if (
          this.filterParamList[0].paramName == "" ||
          this.filterParamList[0].where == "" ||
          this.filterParamList[0].value == null
        ) {
          this.$message.error("存在过滤条件为空！");
        } else {
          this.filterParamList[0].menuKey = this.menuKey;
          this.isShowBox = false;
          console.log(this.filterParamList);

          this.$emit(
            "getActionSelect",
            v,
            this.filterParamList,
            this.selectProgject
          );
        }
      }
      // 多个数据过滤条件
      else {
        let k = true;
        this.filterParamList.every((item, index) => {
          if (item.paramName == "" && item.where == "" && item.value == null) {
            this.filterParamList.splice(index, 1);
            this.conditionList.splice(index, 1);
            this.selectTime.splice(index, 1);
            this.paramsType.splice(index, 1);
            return true;
          } else if (item.paramName == "" || item.where == "") {
            k = false;
            this.$message.error("存在过滤条件为空！");
            return false;
          } else {
            this.filterParamList[index].menuKey = this.menuKey;
            return true;
          }
        });
        if (k) {
          this.isShowBox = false;
          k = false;

          this.$emit(
            "getActionSelect",
            v,
            this.filterParamList,
            this.selectProgject
          );
        }
      }
    },
    select() {
      this.commonFunction(0);

      // 没有搜索记录，把搜索值push进数组首位，存入本地
      if (
        this.filterParamList[0].value &&
        !this.historyList.includes(this.filterParamList[0].value)
      ) {
        this.historyList.unshift(this.filterParamList[0].value);
        localStorage.setItem("historyList", JSON.stringify(this.historyList));
      } else if (this.filterParamList[0].value) {
        //有搜索记录，删除之前的旧记录，将新搜索值重新push到数组首位
        let i = this.historyList.indexOf(this.filterParamList[0].value);
        this.historyList.splice(i, 1);
        this.historyList.unshift(this.filterParamList[0].value);
        localStorage.setItem("historyList", JSON.stringify(this.historyList));
      }
      if (this.historyList.length > 10) {
        console.log(this.historyList[10]);
        this.historyList.pop();
        localStorage.removeItem("historyList");
        localStorage.setItem("historyList", JSON.stringify(this.historyList));
        //this.historyList.length = 2;
      }
    },
    //清空历史搜索记录
    empty() {
      localStorage.removeItem("historyList");
      this.historyList = [];
    },
    //历史搜索数据回填
    putValue(item) {
      this.filterParamList[0].value = item;
    },
    //删除对应的历史搜索数据
    delateValue(item) {
      let i = this.historyList.indexOf(item);
      this.historyList.splice(i, 1);
      localStorage.removeItem("historyList");
      localStorage.setItem("historyList", JSON.stringify(this.historyList));
    },
    showHistory() {
      this.visible = true;
    },
    hideHistory() {
      this.visible = false;
    },
    // 保存监听
    preser() {
      this.$confirm("即将保存数据，是否继续", "警告⚠", {
        confirmButtonText: "确认",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(async () => {
          this.commonFunction(2);
        })
        .catch(() => {});
    },
    // 监听重置设置
    reset() {
      this.conditionList = []; //过滤条件二
      this.selectProgject = 0; // 当前选中的【方案】
      this.myPrograIndex = 0;
      this.filterParamList = [
        {
          paramName: "", // 当前选中的【字段】
          where: "", // 当前选中的【条件范围】
          value: null // 当前输入【内容】
        }
      ];
      this.paramsList = [];
      this.paramsType = [];
      this.selectTime = [[]];
    },
    // 展示筛选条件的数据
    isShowInput() {
      this.isShowBox = true;
    },
    // 添加过滤条件
    addFilterClick() {
      this.filterParamList.push({
        menuKey: this.menuKey,
        paramName: "",
        where: "",
        value: null
      });
      this.selectTime.push([]);
    },
    // 删除过滤条件
    removeFilterClick(index) {
      this.filterParamList.splice(index, 1);
      this.conditionList.splice(index, 1);
      this.selectTime.splice(index, 1);
    },
    clearClick(index) {
      this.filterParamList[index].value = null;
    }
  }
};
</script>
<style scoped>
.srarch_main {
  width: 100%;
  height: auto !important;
  display: inline-block;
}
.srarch_main .seach_item {
  height: auto;
  font-size: 15px;
  color: black;
  background-color: rgb(238 238 238);
  overflow: hidden;
  margin-top: 5px;
}
.contain {
  width: 100%;
  height: 100%;
  border: 1px solid #cccc;
  border-top: none;
  box-sizing: border-box;
  box-shadow: 0px 0px 5px #bbb;
  position: relative;
}

.myProgra,
.select {
  width: 100%;
  height: 40px;
  display: flex;
  align-items: center;
}

.myProgra div,
.select .onediv {
  font-size: 14px;
  box-sizing: border-box;
  padding: 3px 14px;
  margin: 0 10px;
}

.myProgra .border {
  font-size: 12px;
  border-radius: 4px;
  border: 1px solid #bbb;
  position: relative;
}

.myProgra .actionBorder {
  color: #ff8200;
  border: 1px solid #ff8200;
}

.el-icon-success {
  position: absolute;
  font-size: 14px;
  color: #ff8200;
  top: -5px;
  right: -7px;
}

.inputSelect {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.inputSelect .iconselect,
.conditionClass {
  width: 30px;
  height: 23px;
  border-radius: 3px;
  text-align: center;
  line-height: 23px;
  color: #fff;
  background-color: #3a81ff;
  margin-left: 8px;
}

.conditionClass {
  margin-left: 0;
  background-color: #f14e4e;
  position: relative;
}

.isFilterNum {
  width: 14px;
  height: 14px;
  position: absolute;
  top: -5px;
  right: -5px;
  font-size: 12px;
  background-color: #2626e6;
  border: 1px solid #2626e6;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.inputSelect .funBtn {
  height: 23px;
  margin-left: 8px;
  color: blue;
}

.funBtn:hover {
  color: #d63f3f;
}

.isShowClass {
  width: 650px;
  min-height: 100px;
  position: absolute;
  background-color: #fff;
  z-index: 99;
  top: 50px;
  left: 90px;
  box-shadow: 0px 0px 4px #2626e6;
  border-radius: 3px;
}

.isShowIcon {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 18px;
  border: 1px solid #dfc5c5;
  border-radius: 2px;
  padding: 1px;
}

.isShowBoxtSelect {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: flex-start;
  padding-top: 10px;
}
</style>
<style>
.select .el-popover {
  margin-left: 493px;
  margin-top: 0.8%;
  left: 0;
}
.select .el-popover__title {
  margin-bottom: 0;
}
/* 修改下拉选择器的样式 */
.inputSelect .el-select,
.inputSelect .el-date-editor {
  width: 180px;
  box-sizing: border-box;
  height: 25px !important;
  margin-left: 10px;
}

.inputSelect .datetimeClass {
  width: 220px !important;
  height: 25px !important;
  font-size: 10px !important;
  box-sizing: border-box;
  margin-left: 10px;
  padding-right: 0px;
}

.datetimeClass .el-range-separator {
  display: flex;
  align-items: center;
}

.inputSelect .inputClass .el-input__inner {
  width: 220px;
  box-sizing: border-box;
  padding-left: 10px;
  padding-right: 30px !important;
  height: 25px !important;
  font-size: 12px;
}

.inputSelect .inputClass {
  margin-left: 10px;
  display: flex;
  align-items: center;
}

/* 时间选择器 */
/* .inputSelect .el-date-editor {
  width: 180px;
} */

.inputSelect .el-date-editor i {
  display: flex;
  align-items: center;
}

.inputSelect .el-select .el-input--suffix {
  height: 25px !important;
}

/* input样式 */
.inputSelect .el-select .el-input--suffix .el-input__inner,
.inputSelect .el-date-editor .el-input__inner {
  height: 25px !important;
  line-height: 30px;
  font-size: 13px;
  border: 1px solid #bbb;
}

/* 下拉图标样式 */
.inputSelect .el-select .el-input--suffix .el-input__suffix {
  height: 100%;
  display: flex;
  font-size: 12px;
  align-items: center;
}
</style>